{% extends 'layout.html' %}

{% block content %}
    <div class="container" >
        <div style="margin-bottom: 10px">
            <input type="button" value="新建订单1--自带方法" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
            <input id="btnAdd" type="button" value="新建订单2--id的点击调用" class="btn btn-primary">
        </div>
    </div>
    <!--  新建对话框  -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">新建订单</h4>
          </div>
          <div class="modal-body">
            <form id="formAdd" novalidate>
                {% for field in form %}
                    <div class="form-group" style="position: relative;margin-bottom: 20px">
                    <label>{{ field.label }}</label>
                    {{ field }}
                    <span style="color: #419641;position:absolute" class="error-msg">{{ field.errors.0 }}</span>
                    </div>
                {% endfor %}
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">退出</button>
            <button id="btnSave" type="button" class="btn btn-primary">保存</button>
          </div>
        </div>
      </div>
  </div>
    <!--  删除对话框  -->
    <div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="alert alert-danger alert-dismissible fade in" role="alert">
              <h4>删除</h4>
              <p>确认删除这个订单吗<p>
                <button id="btnConfirmDelete" type="button" class="btn btn-danger">确 定</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">取 消</button>
              </p>
            </div>
        </div>
      </div>
    </div>

    <div>
            <div class="panel panel-default">
              <div class="panel-heading">
                  <span class="glyphicon glyphicon-th-list" aria-hidden="true"></span>
                  订单列表
              </div>

              <!-- Table -->
              <table class="table table-bordered" >
                <thead>
                  <tr>
                    <th>id</th>
                    <th>订单号</th>
                    <th>名称</th>
                    <th>价格</th>
                    <th>状态</th>
                    <th>管理员</th>
                    <th>操作</th>
                  </tr>
                </thead>
                <tbody>
                  {% for item in queryset %}
                      <tr uid="{{ item.id }}">
                        <th scope="row">{{ item.id }}</th>
                        <td>{{ item.oid }}</td>
                        <td>{{ item.title }}</td>
                        <td>{{ item.price }}</td>
                        <td>{{ item.get_status_display }}</td>
                        <td>{{ item.admin.username }}</td>
                        <td>
                            <!--<a class="btn btn-primary btn-xs" href="#">编辑</a>
                            <a class="btn btn-danger btn-xs" href="#">删除</a>-->
                            <input uid="{{ item.id }}" type="button" class="btn btn-primary btn-xs btn-edit" value="编辑">
                            <input uid="{{ item.id }}" class="btn btn-danger btn-xs btn-delete" type="button" value="删除">
                        </td>
                      </tr>
                  {% endfor %}
                </tbody>
              </table>
            </div>

            <div style="margin-top: -25px">
                <ul class="pagination">
                    {{ page_string }}
                </ul>
            </div>

        </div>

{% endblock %}

{% block js %}
    <script type="text/javascript">
        var DELETE_ID; //定义一个全局变量用来储存要删除行的id
        var EDIT_ID; // 定义一个全局变量用来存放点编辑按钮时传递过来的id
        $(function (){
            bindBtnAddEvent();
            bindBtnSaveEvent();
            bindBtnDeleteEvent();
            bindBtnConfirmDeleteEvent();
            bindBtnEditEvent();
            })
        function bindBtnAddEvent(){
            $("#btnAdd").click(function (){
                EDIT_ID = undefined;
                //$("#formAdd")[0].reset();
                $("#myModalLabel").text("新建")
                $("#myModal").modal("show");
                $("#id_oid").val({{ form.instance.oid }})
            })
        }
        function bindBtnSaveEvent(){
            $("#btnSave").click(function (){
                // 可以根据 EDIT_ID是否为空，来判断执行的是添加：undefined或者是编辑：uid，添加是未定义，编辑是uid的数据
                $(".error-msg").text("")
                $.ajax({
                    url:"/order/add/",
                    type:"post",
                    data:$("#formAdd").serialize(),
                    dataType: "JSON",
                    success:function (res){
                        if(res.status){
                            alert("添加成功")
                            //location.reload();
                            //添加成功后需要把原来的数据清空好继续添加数据。$("#formAdd")[0]是取domain对象，利用domain对象来进行清空
                            $("#formAdd")[0].reset();
                            $("#id_oid").val(res.oid);
                            //console.log(res.oid)
                            //关闭对话框可以用刷新页面location.reload();，或者是下面自带的方法,自带的方法不会重新生成新的单号，还需要后端生成后传递给前端
                            $("#myModal").modal("hide");
                            location.reload();
                        }else {
                            $.each(res.error,function (name,data){
                            $("#id_" + name).next().text(data[0])
                            })
                        }

                    }
                })
            })
        }
        function bindBtnDeleteEvent(){
            $(".btn-delete").click(function (){
                $("#deleteModal").modal("show");
                // 获取当前行的ID并赋值给全局变量
                DELETE_ID = $(this).attr("uid");
            });
        }
        function bindBtnConfirmDeleteEvent(){
            $("#btnConfirmDelete").click(function (){
                $.ajax({
                    //url: "/order/" + DELETE_ID + "/delete", 可以中间传值，data就不用传值了
                    url: "/order/delete",  //也可以只写url，再通过data传值
                    type: "GET",
                    data: {
                        uid:DELETE_ID
                    },
                    dataType: "JSON",
                    success:function (res){
                        if (res.status){
                            {#$("#deleteModal").modal("hide"); //先隐藏弹出框#}
                            {#//已经把tr标签也添加了uid属性，可以根据uid属性找到对应的tr标签。用标签的remove方法，直接删除就可以#}
                            {#$("tr[uid='" + DELETE_ID + "']").remove()#}
                            {#DELETE_ID = 0#}
                            location.reload()
                        }else {
                            alert(res.error)
                        }
                    }
                })
            })
        }

        function bindBtnEditEvent(){
            $(".btn-edit").click(function (){
                $("#formAdd")[0].reset();
                //利用this获取当前编辑行的uid，uid已经通过标签赋值给了行id：uid="{{ item.id }}
                var currentId = $(this).attr("uid");// 定义一个局部变量，储存uid的数据
                EDIT_ID = currentId
                $("#myModalLabel").text("编辑")

                $.ajax({
                    url:"/order/detail/",
                    type:"get",
                    data:{
                        uid:currentId
                    },
                    dataType:"JSON",
                    success:function (res){
                        if (res.status){
                           $("#myModal").modal("show");
                           $.each(res.data,function (name,data){
                                $("#id_" + name).val(data)
                            })
                        }else {
                            alert(res.error)
                        }
                    }
                })
            });
        }
    </script>
{% endblock %}














